<!DOCTYPE html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.RichTextSpellChecker</title>
  <meta charset="utf-8">
  <script src="../base.js"></script>
  <script>
    goog.require('goog.ui.RichTextSpellChecker');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <style>
  .goog-menu {
    position: absolute;
    color: #000;
    border: 1px solid #B5B6B5;
    background-color: #F3F3F7;
    cursor: default;
    font: normal small arial, helvetica, sans-serif;
    width: 25ex;
    outline: 0;
  }

  .goog-menuitem {
    padding: 2px 5px;
    position: relative;
  }

  .goog-menuitem-highlight {
    background-color: #4279A5;
    color: #FFF;
  }

  .goog-menuitem-disabled {
    background-color: #F3F3F7;
    color: #999;
  }

  .goog-menu hr {
    background-color: #999;
    height: 1px;
    border: 0px;
    margin: 0px;
  }
  </style>
</head>
<body>
  <h1>goog.ui.RichTextSpellChecker</h1>
  <p>
    The words "test", "words", "a", and "few" are set to be valid words, all others are considered spelling mistakes.
  </p>
  <p>
    If keyboard navigation is enabled, then the following shortcuts can be used
    inside the editor:
    <ul>
      <li>Previous misspelled word: ctrl + left-arrow</li>
      <li>next misspelled word: ctrl + right-arrow</li>
      <li>Open suggestions menu: down arrow</li>
    </ul>
  </p>
  <p>
    <iframe id="rich" style="width: 50ex; height: 15em;"></iframe>
  </p>

  <button onclick="s.check();">check</button>
  <button onclick="s.resume();">done</button>

  <script>

    function localSpellCheckingFunction(words, spellChecker, callback) {
      var len = words.length;
      var results = [];
      for (var i = 0; i < len; i++) {
        var word = words[i];
        if (word == 'test' || word == 'words' || word == 'a' || word == 'few') {
          results.push([word, goog.spell.SpellCheck.WordStatus.VALID]);
        } else {
          results.push([word, goog.spell.SpellCheck.WordStatus.INVALID,
              ['suggestion1', 'suggestion2']]);
        }
      }
      callback.call(spellChecker, results);
    }

    var handler = new goog.spell.SpellCheck(localSpellCheckingFunction);
    var s = new goog.ui.RichTextSpellChecker(handler);
    var el = document.getElementById('rich');
    var doc = el.contentDocument || el.contentWindow.document;
    doc.designMode = 'on';

    window.setTimeout(function() {
      s.decorate(el);
    }, 0);
  </script>
</body>
</html>
